<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import { postHomeData } from "/@/api/home";
import JSEncrypt from "jsencrypt";
import { usePermissionStore } from "/@/store/modules/permission";
import { storageLocal } from "/@/utils/storage";

const usePermission = usePermissionStore();

let userId = ref("");
let currentRsaUserId = ref("");

userId.value = storageLocal.getItem("info")?.userId;
let loading = ref<boolean>(true);
let projectInfo = reactive({
  projectCount: "",
  projectAccepted: "",
  projectAbnormal: "",
  projectList: []
});
let currentProjectItem = reactive({
  id: "",
  projectName: "",
  projectPathLike: ""
});
let iframUrl = ref("");

let isShowEmpty = ref(false);

const parentUrl = ref(
  // "https://dvs.crdigital.com.cn/DataV_WebGUI/share.html#share/display?shareInfo=DA1C3E7DAF7EC46FDC39861F361C78B7517FC6CEF4F1ED425FFF75A2CB7527D3ABD4F0725AF12462EE9485E57D523401096C10F75139148538023C3A4B3BE78F3E6EAD588401DA78A551F075EC83DF3B4C7F6F998430041F91640984545F1B5FE43B8C25177532ED344D673F546810BE8FA5C13B59FE8FB8FBDA5F52DCCC2981D7C1207CAA9123AB1610D5C013677811F037466E5354DBE2F9772C061D5AAC6B06F49C8812F16BB3171BADFE668D8BC7E13E3027441A51932BA159E9146104216CB85A491314E729A82F67D4306E354E7BABF83CFDC858E82AE4F992D1558677CFF4DE176B8A568730F73F32F6AB94FC14ECBDDCF919D3EFEB9FA33DAB3A2082"
  "https://dvs.crdigital.com.cn/DataV_WebGUI/share.html#/share/display?shareInfo=DA1C3E7DAF7EC46FDC39861F361C78B7517FC6CEF4F1ED425FFF75A2CB7527D3ABD4F0725AF12462EE9485E57D523401FAAFA9FEC258B36AFA67CCA382D440117F473B6238FFFC04B1275C99336E97F3BE3183E753723635D9484ABEF8FFFF31DC68C882B79751D921B6789B588FB492B5F6C5204C9BAB7C22FCB04DD6D06E0154BF53EBC9406E399366EBF2140ED6D4AFE4BEEDE0A74EE59C6C1A5E7DEFFF69892C45033094F5A6B037908562D82F264E9D209495A18F2604F70984D46609839F2AF2077939901F26B5FEA5CF39E3CA9CD687AF51C6D9144103EEB9B290D5A7B849BEECCBF3A6B8CB92E5B1F815F85DC8BFF78A0CB76AE6E853D3F48F621DDDDC84169109A6577334D9561852CF75EC"
);

setTimeout(() => {
  loading.value = !loading.value;
}, 500);

// 解决ldap登录带过来的用户名问题
watch(
  () => usePermission.userId,
  () => {
    if (usePermission.userId) {
      userId.value = usePermission.userId;
    }
  }
);

const initGetData = async () => {
  const encryptor = new JSEncrypt(); // 创建加密对象实例
  let publickKey = `MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKcbECgXDZ/989X8TuAFfQpDUi0i5n7EZpwGvbETXLXtHunS1SPDbLlrlYjSaF9bAAdf5SsPtkOyoQJALMw24AkCAwEAAQ==`;

  // 生产环境的密钥
  if (import.meta.env.VITE_PROJECT_ENV === "pre") {
    publickKey = `MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAOoQrxqdDPj7Yafbp+qDnv4XZ+3J9wP7DTT3Lu1vwOsq
      cMW4x5lo54ROu7VMx1m4iaUxj7L/uApoh2klC4muEx8CAwEAAQ==`;

    parentUrl.value =
      "https://dvs.crdigital.com.cn/DataV_WebGUI/share.html#/share/display?shareInfo=DA1C3E7DAF7EC46FDC39861F361C78B7517FC6CEF4F1ED425FFF75A2CB7527D3ABD4F0725AF12462EE9485E57D523401FAAFA9FEC258B36AFA67CCA382D440117F473B6238FFFC04B1275C99336E97F3BE3183E753723635D9484ABEF8FFFF31DC68C882B79751D921B6789B588FB492B5F6C5204C9BAB7C22FCB04DD6D06E0154BF53EBC9406E399366EBF2140ED6D4AFE4BEEDE0A74EE59C6C1A5E7DEFFF69892C45033094F5A6B037908562D82F264E9D209495A18F2604F70984D46609839F2AF2077939901F26B5FEA5CF39E3CA9CD687AF51C6D9144103EEB9B290D5A7B849BEECCBF3A6B8CB92E5B1F815F85DC8BFF78A0CB76AE6E853D3F48F621DDDDC84169109A6577334D9561852CF75EC";
  }

  const publicPassword = `-----BEGIN PUBLIC KEY-----${publickKey}-----END PUBLIC KEY-----`;
  encryptor.setPublicKey(publicPassword); //设置公钥
  console.log(userId.value, "userId");
  const rsaUserId = encryptor.encrypt(String(userId.value)); // 对内容进行加密
  // const transferUserId = btoa(rsaUserId as string);
  // 存储一下加密后的用户id
  currentRsaUserId.value = rsaUserId as string;

  const params = {
    userIdEncy: rsaUserId
  };
  const { code, data } = await postHomeData(params);
  console.log(code, data);
  const { projectAbnormal, projectAccepted, projectCount, projectList } = data;
  if (code === 200) {
    projectInfo.projectAbnormal = projectAbnormal;
    projectInfo.projectAccepted = projectAccepted;
    projectInfo.projectCount = projectCount;
    projectInfo.projectList = projectList.map(item => {
      return {
        id: item.id,
        projectName: item.projectName,
        projectPathLike: item.projectPath
      };
    });
    if (projectInfo.projectList.length) {
      currentProjectItem.id = projectInfo.projectList[0].id;
      currentProjectItem.projectName = projectInfo.projectList[0].projectName;
      currentProjectItem.projectPathLike =
        projectInfo.projectList[0].projectPathLike;
      // iframUrl.value = `http://218.17.168.163:8200/DataV_WebGUI/share.html#/share/display?idChar=53&projectPathLike=%2F53%2F49%2F0%2F&userIdEncy=OU84kSxHAFLTcK%2BTx5Nnh5GXSfl1s%2FRbckwDaP576%2FKcmENsUCziKNWUYGkLG9MI41Xbz81Yuo22ad%2B3r5cTVA%3D%3D&shareInfo=DA1C3E7DAF7EC46FDC39861F361C78B7517FC6CEF4F1ED425FFF75A2CB7527D3ABD4F0725AF12462EE9485E57D523401FAAFA9FEC258B36AFA67CCA382D440117F473B6238FFFC04B1275C99336E97F3BE3183E753723635D9484ABEF8FFFF31DC68C882B79751D921B6789B588FB492B5F6C5204C9BAB7C22FCB04DD6D06E0154BF53EBC9406E399366EBF2140ED6D4AFE4BEEDE0A74EE59C6C1A5E7DEFFF69892C45033094F5A6B037908562D82F264E9D209495A18F2604F70984D46609839F2AF2077939901F26B5FEA5CF39E3CA9CD687AF51C6D9144103EEB9B290D5A7B849BEECCBF3A6B8CB92E5B1F815F85DC8BFF78A0CB76AE6E853D3F48F621DDDDC84169109A6577334D9561852CF75EC`;
      iframUrl.value = `${parentUrl.value}&idChar=${
        currentProjectItem.id
      }&projectPathLike=${encodeURIComponent(
        currentProjectItem.projectPathLike
      )}&userIdEncy=${encodeURIComponent(currentRsaUserId.value)}`;
    } else {
      isShowEmpty.value = true;
    }

    console.log(iframUrl.value, "iframUrl.value");
  }
};

onMounted(() => {
  console.log("版本号：20220407");
  initGetData();
});

const handleSelect = () => {
  iframUrl.value = "";
  nextTick(() => {
    iframUrl.value = `${parentUrl.value}&idChar=${
      currentProjectItem.id
    }&projectPathLike=${encodeURIComponent(
      currentProjectItem.projectPathLike
    )}&userIdEncy=${encodeURIComponent(currentRsaUserId.value)}`;
  });
};
</script>

<template>
  <div class="welcome">
    <el-card>
      <template #header> 我的项目 </template>
      <div class="header_wrap">
        <div class="header_wrap-item">
          项目总数&emsp;&emsp;&emsp;{{ projectInfo.projectCount }}
        </div>
        <div class="header_wrap-item">
          已验收项目数&emsp;&emsp;&emsp;{{ projectInfo.projectAccepted }}
        </div>
        <div class="header_wrap-item error_num">
          异常项目数&emsp;&emsp;&emsp;{{ projectInfo.projectAbnormal }}
        </div>
      </div>
    </el-card>
    <br />
    <div class="content_wrap" v-if="!isShowEmpty">
      <el-select
        v-model="currentProjectItem"
        value-key="id"
        @change="handleSelect"
      >
        <el-option
          v-for="item in projectInfo.projectList"
          :key="item.id"
          :value="item"
          :label="item.projectName"
        />
      </el-select>
    </div>

    <iframe
      v-if="iframUrl"
      id="ifram__content"
      :src="iframUrl"
      frameborder="0"
    ></iframe>

    <el-table
      v-if="isShowEmpty"
      :data="[]"
      :height="200"
      v-adaptive="{ bottomOffset: 20 }"
    >
      <template #empty>
        <el-empty :image-size="200" description="暂无数据"></el-empty>
      </template>
    </el-table>
  </div>
</template>

<style module scoped>
.size {
  height: 335px;
}
</style>

<style lang="scss" scoped>
#ifram__content {
  width: 100%;
  height: 1200px;
}
.welcome {
  width: 100%;
  // height: 100%;
  .header_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &-item {
      width: 200px;
      height: 40px;
      margin-right: 20px;
      border-radius: 8px;
      background: rgb(241, 245, 254);
      line-height: 40px;
      text-indent: 10px;
      box-sizing: content-box;
      color: #030852;
    }
    .error_num {
      color: red;
    }
  }
  .content_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    border-radius: 8px;
    background: rgb(241, 245, 254);
    padding-left: 10px;
  }
}
</style>

<!-- <script setup lang="ts">
import { ref, shallowRef, onBeforeMount, watch, reactive } from "vue";
import { postHomeData } from "/@/api/home";
import JSEncrypt from "jsencrypt";
import { usePermissionStore } from "/@/store/modules/permission";
import { storageLocal } from "/@/utils/storage";
import {
  ReGithub,
  RePie,
  ReLine,
  ReBar,
  ReScroll
} from "/@/components/ReCharts/index";

let loading = ref<boolean>(true);
const componentList = shallowRef([]);

const usePermission = usePermissionStore();

let userId = ref("");
let currentRsaUserId = ref("");

userId.value = storageLocal.getItem("info")?.userId;
let projectInfo = reactive({
  projectCount: "",
  projectAccepted: "",
  projectAbnormal: "",
  projectList: []
});

setTimeout(() => {
  loading.value = !loading.value;
}, 500);

// 解决ldap登录带过来的用户名问题
watch(
  () => usePermission.userId,
  () => {
    if (usePermission.userId) {
      userId.value = usePermission.userId;
    }
  }
);

const initGetData = async () => {
  const encryptor = new JSEncrypt(); // 创建加密对象实例
  let publickKey = `MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKcbECgXDZ/989X8TuAFfQpDUi0i5n7EZpwGvbETXLXtHunS1SPDbLlrlYjSaF9bAAdf5SsPtkOyoQJALMw24AkCAwEAAQ==`;

  // 生产环境的密钥
  if (import.meta.env.VITE_PROJECT_ENV === "pre") {
    publickKey = `MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAOoQrxqdDPj7Yafbp+qDnv4XZ+3J9wP7DTT3Lu1vwOsq
      cMW4x5lo54ROu7VMx1m4iaUxj7L/uApoh2klC4muEx8CAwEAAQ==`;
  }

  const publicPassword = `-----BEGIN PUBLIC KEY-----${publickKey}-----END PUBLIC KEY-----`;
  encryptor.setPublicKey(publicPassword); //设置公钥
  console.log(userId.value, "userId");
  const rsaUserId = encryptor.encrypt(String(userId.value)); // 对内容进行加密
  // 存储一下加密后的用户id
  currentRsaUserId.value = rsaUserId as string;

  const params = {
    userIdEncy: rsaUserId
  };
  const { code, data } = await postHomeData(params);
  console.log(code, data);
  const { projectAbnormal, projectAccepted, projectCount } = data;
  if (code === 200) {
    projectInfo.projectAbnormal = projectAbnormal;
    projectInfo.projectAccepted = projectAccepted;
    projectInfo.projectCount = projectCount;
  }
};

onBeforeMount(() => {
  console.log("版本号：20211227");
  initGetData();
  componentList.value = [];
});
</script>

<template>
  <div class="welcome">
    <el-card>
      <template #header> 我的项目 </template>
      <div class="header_wrap">
        <div class="header_wrap-item">
          项目总数&emsp;&emsp;&emsp;{{ projectInfo.projectCount }}
        </div>
        <div class="header_wrap-item">
          已验收项目数&emsp;&emsp;&emsp;{{ projectInfo.projectAccepted }}
        </div>
        <div class="header_wrap-item error_num">
          异常项目数&emsp;&emsp;&emsp;{{ projectInfo.projectAbnormal }}
        </div>
      </div>
    </el-card>
    <br />

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="height: 100%">
          <ReGithub />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <ReScroll />
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <RePie />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <ReLine />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <ReBar />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style module scoped>
.size {
  height: 335px;
}
</style>

<style lang="scss" scoped>
.welcome {
  width: 100%;

  height: 100%;
  .header_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &-item {
      width: 200px;
      height: 40px;
      margin-right: 20px;
      border-radius: 8px;
      background: rgb(241, 245, 254);
      line-height: 40px;
      text-indent: 10px;
      box-sizing: content-box;
      color: #030852;
    }
    .error_num {
      color: red;
    }
  }

  .top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background: #fff;

    .left-mark {
      display: flex;
      align-items: center;

      img {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
      }

      span {
        font-size: 14px;
      }
    }
  }

  .space {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    padding: 10px;

    .echart-card {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

      h4 {
        margin: 0;
        padding: 20px;
      }
    }
  }
}
</style> -->
